<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="queryParams.name" placeholder="姓名" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
		</el-row>

		<el-table v-loading="loading" :data="userList">
			<el-table-column show-overflow-tooltip label="创建时间" width="180" align="center" prop="createTime">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip width="100" label="昵称" align="center" prop="nickName" />
			
			<el-table-column width="100" label="头像" align="center" prop="createTime">
				<template slot-scope="scope">
					<el-image style="width: 40px; height: 40px" :src="scope.row.headimgurl"
						:preview-src-list="scope.row.imgs">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip label="姓名" width="150" align="center" prop="name">
			</el-table-column>
			<el-table-column show-overflow-tooltip width="100" label="性别" align="center" prop="sex" />
			<el-table-column show-overflow-tooltip width="100" label="民族" align="center" prop="nation" />
			<el-table-column show-overflow-tooltip width="100" label="政治面貌" align="center" prop="politics" />
			<el-table-column show-overflow-tooltip width="100" label="年龄" align="center" prop="age" />
			<el-table-column show-overflow-tooltip width="100" label="婚姻状况" align="center" prop="maritalStatus" />
			<el-table-column show-overflow-tooltip width="100" label="学历" align="center" prop="background" />
			<!-- <el-table-column show-overflow-tooltip width="100" label="就读专业" align="center" prop="major" /> -->
			<el-table-column show-overflow-tooltip width="200" label="就读专业" align="center">
				<template slot-scope="scope">
					<div v-for="it in scope.row.userMajorRgppList">{{it.majorName}}</div>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip width="150" label="毕业院校类型" align="center" prop="graduateType" />
			<el-table-column show-overflow-tooltip width="150" label="是否健康" align="center" prop="physicalCondition" />
			<el-table-column show-overflow-tooltip width="200" label="身高(cm)" align="center" prop="height" />
			<el-table-column show-overflow-tooltip width="100" label="体重(kg)" align="center" prop="weight" />
			<el-table-column show-overflow-tooltip width="150" label="是否过英语4级" align="center" prop="englishFour" />
			<el-table-column show-overflow-tooltip width="150" label="是否过英语六级" align="center" prop="englishSix" />
			<el-table-column show-overflow-tooltip width="150" label="是否过计算机2级" align="center" prop="computerTwo" />
			<el-table-column show-overflow-tooltip width="100" label="是否为应届" align="center" prop="stressStatus" />
			<el-table-column show-overflow-tooltip width="100" label="毕业时间" align="center" prop="graduateTime" />
			<el-table-column show-overflow-tooltip width="200" label="哪里了解到的我们" align="center" prop="understand" />
			<el-table-column show-overflow-tooltip width="200" label="为何选择我们" align="center" prop="choice" />
			<el-table-column show-overflow-tooltip width="200" label="是否是退役人员" align="center" prop="veteranStatus" />
			<el-table-column show-overflow-tooltip width="200" label="是否是海外留学生" align="center" prop="overseasStudent" />
			<el-table-column show-overflow-tooltip width="200" label="何时段出去留学" align="center" prop="overseasTime" />
			<!-- <el-table-column label="联系方式" align="center" prop="phone" /> -->
			<el-table-column width="100" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="success" style="padding: 10px 10px;" @click="handleDetail(scope.row)"
						>详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
	</div>
</template>

<script>
	import {
		rgListApi,
	} from "@/api/all/userApi";
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		name: "Documentary",
		data() {
			return {
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					name: ''
				},
				dialogVisible: false,
				userList: [], //存取后端获取客户列表
				DetailVisible: false,
				userDetail: {}
			};
		},
		created() {
			if (this.$store.state.sDet.queryDb) {
				console.log(22222);
				this.queryParams = this.$store.state.sDet.queryDb
			}
			this.getList();
			console.log(this.$store.state.user.nickName, 'nickName');
		},
		computed: {
			...mapState('sDet', ['queryDb'])
		},
		beforeDestroy() {
			this.getQueryDb(this.queryParams);
		},
		methods: {
			...mapActions('sDet', ['getQueryDb']),
			// 详情
			handleDetail(row) {
				this.$router.push({
					path: '/rgDetail/rgDetail',
					query: {
						row: row
					}
				})
			},

			/** 查询跟单详情列表 */
			getList() {
				this.loading = true;
				rgListApi(this.queryParams).then(response => {
					console.log(response, '人岗匹配');
					response.rows.forEach(it => {
						it.imgs = []
						it.imgs.push(it.headimgurl)
					})
					this.userList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				// this.resetForm("queryForm");
				this.queryParams = {
						pageNum: 1,
						pageSize: 10,
						name: ''
					},
					this.handleQuery();
			},
		}
	};
</script>
<style>
	.el-tooltip__popper {

		max-width: 800px;

	}

	::v-deep .el-upload-list__item .is-success.focusing .el-icon-close-tip {
		display: none !important;
	}

	.el-upload--picture-card {
		width: 100%;
		height: 100%;
	}

	.el-upload {
		display: block;
	}

	.el-upload-dragger {
		width: 100%;
		height: 100%;
	}
</style>